<template>
  <div class="manual-entry-container" style="width: calc(100% - 40px);margin: 0 auto;">
    <div style="overflow-y: auto;width:100%" >
      <ul>
        <li>
          <span class="active">专业</span>
          <span>{{ zy }}</span>
          <span class="active">专业班次</span>
          <span>{{ zybc }} </span>
          <span class="active">人数</span>
          <span>{{ rs }} 人 </span>
        </li>
      </ul>
      <ul>
        <li style="display: flex">
          <span class="active">课程编号</span>
          <span class="active">课程名称</span>
          <span class="active">承担单位</span>
          <span class="active">计划上课学期</span>
          <span class="active">学时</span>
        </li>
      </ul>
      <div v-for="item in tableData">
        <div style="border-bottom: 1px solid rgba(0, 76, 167, 0.4);">
          <div class="plsz-title">
            <div>
              {{item.xueqi}}专业班次执行计划
            </div>
          </div>
        </div>
      <ul v-if="item.kcList.length > 0">
        <li style="display: flex" v-for="data in item.kcList">
          <span>{{data.kcbh}}</span>
          <span>{{data.kcmc}}</span>
          <span>{{data.cddw}}</span>
          <span>{{data.jhskxq}}</span>
          <span>{{data.zxs}}</span>
        </li>
      </ul>
      </div>
      <div style="border-bottom: 1px solid rgba(0, 76, 167, 0.4);">
        <div class="plsz-total">
          <div>
              合计: 共{{total}}门
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-block" style="display: block">
      <div class="export-button" @click="exportData">
        <img src="../../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
      </div>
    </div>
    <!-- <div class="search-container" style="width: 1735px;margin: 0 auto;margin-top: 20px;">
      <button-item
        :name="'导出Excel'"
        :link="''"
        :icon="'el-icon-download'"
        :buttonColor="'yellow'"
      ></button-item>
    </div> -->
  </div>
</template>

<script>
import {getYwbczxjh, exportPyfa} from "@/api/trainingManagement/place.js";
import ButtonItem from "@/components/ButtonItem.vue";
export default {
  components: {
    ButtonItem,
  },
  name: "workOutClass",
  data() {
    return {
      zy: "", // 学期
      zybc: "", //课程编号
      rs: "", // 课程名称
      tableData: [],
      kcid: "", //课程id
      total: "", //门数
    };
  },
  mounted() {
    this.kcid = this.$route.query.kcid;
    this.queryDataInfo();
  },
  methods: {
    // 查询专业班次信息
    async queryDataInfo() {
      const res = await getYwbczxjh(this.kcid);
      if (res.data.code == 200) {
        this.zy = res.data.data.className;
        this.zybc = res.data.data.specialtyName
        this.rs = res.data.data.ratedNumber;
        this.tableData = res.data.data.xueqiKc;
        var count = 0;
        if (res.data.data.xueqiKc.length > 0) {
          res.data.data.xueqiKc.forEach(item => {
            count += item.kcList.length;
          });
        }
        this.total = count;
      }
    },
    // 导出培养计划
    exportData() {
      exportPyfa(this.kcid).then((res) => {
          /** 获取生成设置好的文件名 */
          var filename = res.headers["content-disposition"];
          filename = filename.split("=")[1];
          // 我看好多博客此处没有再次编码，我这里不重新编码，文件名称总是乱码
          filename = escape(filename);
          filename = decodeURIComponent(filename, "utf-8");
          console.log(filename);
          console.log(res.data)
          /** 接收文件流 */
          const blob = new Blob([res.data]);
          let url = URL.createObjectURL(blob);
          /** 模拟浏览器操作Document，并模拟下载动作 */
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", filename);
          document.body.appendChild(link);
          link.click();
      });
    }
  },
};
</script>

<style scoped lang="less">
.manual-entry-container {
  > div:nth-child(1) {
    width: 1735px;
    // height: 785px;
    height: calc(100vh - 230px);
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            // width: 285px;
            width: 15%;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
        }
      }
      &:nth-child(1) {
        li {
          > span {
            height: 60px;
          }
        }
      }
      &:nth-child(2n) {
        li {
          border-bottom: 1px solid rgba(0, 76, 167, 0.4);
          > span {
            width: 400px;
            text-align: center;
            padding-left: 0;
            height: 60px;
            &:nth-child(1) {
              width: 347px;
            }
            &:nth-child(2) {
              width: 347px;
            }
            &:nth-child(3) {
              width: 347px;
            }
            &:nth-child(4) {
              width: 347px;
            }
            &:nth-child(5) {
              width: 347px;
            }
            &.active {
              //border-top: 1px solid rgba(0, 76, 167, 0.4);
              height: 73px;
              padding-top: 25px;
            }
          }
          &:nth-child(2) {
            > div {
              height: 57px;
              padding: 18px 30px;
              > span {
                &:nth-child(1) {
                  font-size: 16px;
                  font-weight: bold;
                  color: #004ca7;
                }
                &:nth-child(2) {
                  font-size: 14px;
                  color: #004ca7;
                }
              }
            }
          }
        }
      }
    }
    > div:nth-child(2) {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  .button-group {
    text-align: center;
    margin-top: 36px;
    > div {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(255, 246, 239, 1);
      border: 1px solid rgba(243, 184, 21, 1);
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(243, 184, 21, 1);
      text-align: center;
    }
  }
  .edit-icon {
    font-size: 20px;
    color: #02c86c;
    margin-left: 10px;
    cursor: pointer;
  }

  .plsz-total {
    margin: 20px;
    color: #004ca7;
    margin-left: 100px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: 15px;
    > div > span {
      font-weight: 500;
    }
  }

  .plsz-title {
    color: #004ca7;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px;
    > div > span {
      font-weight: 500;
    }
  }
  /deep/ .el-input--small .el-input__inner {
    height: 28px;
  }
}

.btn-caozuo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bottom-block {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .export-button {
      width: 127px;
      height: 27px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 14px;

      > img {
        width: 17px;
        height: 17px;
      }

      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
    }

    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }
</style>
